<!--
 * @Description: 
 * @Author: YoungWind
 * @Date: 2020-09-24 10:26:24
 * @LastEditTime: 2020-10-08 19:40:27
 * @LastEditors: YoungWind
 * @FilePath: \ccd3\src\ccd3\parallel\index.html
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>平行关系</title>
		<link rel="stylesheet" href="../../css/root.css" />
		<link rel="stylesheet" href="../../css/grid.css" />
		<script src="../../../libs/d3/d3.v6.js"></script>
		<script src="../../../libs/d3/d3-sankey.min.js"></script>
	</head>

	<body>
		<h1>平行关系</h1>
		<main class="container">
			<h2>平行坐标</h2>
			<section>
				<div id="coordinates" style="height: 60vh"></div>
				<div id="coordinatesTable"></div>
			</section>

			<h2>桑基图</h2>
			<section>
				<div id="sankey" style="height: 50vh"></div>
			</section>
		</main>

    <h2>桑基图</h2>
    <section>
      <div id="sankey" style="height: 100vh">
      </div>
    </section>
  </main>

  <script type="module">
    import { ParallelCoordinates, ParallelSankey } from '../../dist/ccd3.js'
    import Sankey from './charts/parallel.sankey.js'
    d3.csv('./data/parallel.coordinates.csv')
      .then(data => {
        const pc = new ParallelCoordinates('coordinates', data, 'coordinatesTable')
          .setMargin(50, 50, 50, 50)
          //线段颜色根据ClassificationKey分类
          .setClassificationKey('产地')
          //值是连续的
          .setContinuousKeys(['mpg', '气缸', '排量', '马力', '重量', '加速度'])
          //值是离散的值
          .setDiscreteKeys(['产地', '年份', '名称'])
          //需要过滤的字段名称
          .setFilterKeys(['名称'])
          .init()
          .render();
      })
      .catch(e => {
        console.error(e);
      })

    d3.csv('./data/parallel.sankey.csv')
      .then(data => {
        console.log(data);
        let sankey = new ParallelSankey("sankey", data)
        .setMargin(25,25,25,25)
          .setFrom("from")
          .setTo("to")
          .init()
          .render();
      })
  </script>

</body>

</html>
